<template>
    <div class="components-container" v-cloak>
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth" v-bind:blocking="true">
            <h3>{{title}}</h3>
            <div style="margin:10px 20px">
                    <div class="layui-form-item">
                      <div class="layui-inline">
                      <label class="layui-form-label">业务编号</label>
                        <div class="layui-input-inline">
                          <el-input v-model="regInfo.CHDREGBUSNUM" placeholder="请输入业务编号" @keyup.enter.native="getRegInfo">
                            <el-button slot="append" icon="el-icon-search" @click="getRegInfo"></el-button>
                          </el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品编号</label>
                        <div class="layui-input-inline">
                            <el-input ref="infocus1" v-model="crhData.BOOKNO" placeholder="请输入商品编号" @keyup.enter.native="getbookdetail" :readonly='isINFO'>
                                <el-button slot="append" icon="el-icon-search" @click="getbookdetail" :disabled='isINFO'></el-button>
                            </el-input>
                            <div v-if="this.title != '丧葬用品出库详情'" class="triangle_border_up"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">逝者姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGNAME" placeholder="请输入逝者姓名" :readonly='isINFO'></el-input>
                        </div>
                    </div>
                      <!-- <div class="layui-inline">
                        <label class="layui-form-label">逝者姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGNAME" placeholder="请输入逝者姓名" :readonly='isINFO'></el-input>
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <label class="layui-form-label">客户姓名</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGHANDLERNAME" :readonly='isINFO'></el-input>
                            <div v-if="this.title != '丧葬用品出库详情'" class="triangle_border_up"></div>
                        </div>
                    </div>
                  <!-- <div class="layui-inline">
                        <label class="layui-form-label">关联编号</label>
                        <div class="layui-input-inline">
                            <el-input v-model="regInfo.REGBUSNUM" :readonly='isINFO'></el-input>
                        </div>
                    </div> -->
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">收费备注</label>
                        <div class="layui-input-inline">
                            <el-input style="width: 800px;" v-model="regInfo.CHDDESC" :readonly='isINFO'></el-input>
                        </div>
                    </div>
                </div>

            </div>
            <div id="box" :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
                <table ref="scroll" class="layui-table" style="border-spacing: 0;">
                    <thead>
                        <tr>
                            <th>费用名称</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody ref='inputs'>
                        <tr ref="trscroll" class="allRow" v-for="(chl,index) in chlList">
                            <td>
                                <!-- 费用名称 -->
                                <el-input v-model="chl.DPGNAME" readonly>
                                </el-input>
                            </td>
                            <td>
                                <!-- 单位 -->
                                <el-input v-model="chl.DPGUNIT" readonly>
                                </el-input>
                            </td>
                            <td>
                                <!-- 数量 -->
                                <el-input @keyup.native="check(index)" @keydown.enter.native="enterEvent(index)" v-model="chl.DOLNUM" :readonly='isINFO'>
                                    <!-- :disabled='isINFO' -->
                                </el-input>
                            </td>
                            <td>
                                <!-- 单价 -->
                                <el-input v-model="chl.DPGSALE" readonly></el-input>
                            </td>
                            <td>
                                <!-- 金额 -->
                                <el-input v-model="chl.DOLMONEY" readonly></el-input>
                                <!-- {{chl.DOLMONEY}} -->
                            </td>
                            <td>
                                <button class="layui-btn layui-btn-small layui-btn-normal" @click="remove(index)" :disabled='isINFO'>
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4"></td>
                            <td>{{ mountTotal }}</td>
                            <td>
                                <!-- <button class="layui-btn layui-btn-small layui-btn-normal" @click="insert()" :disabled='isINFO'>
                                    <i class="layui-icon">&#xe654;</i>
                                </button> -->
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="layui-form-item btnCenter sweet-btn">
                <p style="position:absolute;color:red">丧葬用品总金额：{{szypnums}} 骨灰盒总金额：{{ghhnums}}</p>
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="submissions()" :disabled='this.issubmit' v-if="this.title == '丧葬用品出库申请' || this.title == '丧葬用品出库修改'" :loading="this.$store.state.isloading">提交</el-button>

            </div>
        </sweet-modal>

    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}

.sweet-btn {
  margin-top: 20px;
}
</style>

<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { accMul, Subtr, accAdd } from "@/utils/operations.js";
import { ORDER } from "@/const/orderConst.js";

const ADD = "新增";
const INFO = "义乌详情";
const CHANGE = "修改";

export default {
  name: "hello",
  data() {
    return {
      pageWidth: 1200,
      maxHeight: 500,
      order: null,
      title: null,
      reginfoid: null, //regid
      titles: null,
      printUrl: null,
      issubmit: false,

      //收费信息
      regInfo: {
        CHDREGBUSNUM: null,
        REGNAME: null, //逝者姓名
        REGSEXDESC: null, //逝者性别
        REGAGE: null, //年龄
        DPGID: null,
        REGHANDLERNAME: null,
        REGBUSNUM:null, //关联编号
        REGADDRESS: null,
        DPOID: null,
        REGID: null,
        CHDID: null,
        CHDDESC:null,
      },
      crhData: {
        BOOKNO: null //商品编号
      },
      //收费项目
      chlList: [],
      chl: {
        DOLDEPOSIT: null, //所属仓库
        // DOLDPGID: null,//物品类别编号
        DOLDPGID: "", //物品类别编号
        DOLIDESOK: null, //库存数量
        DOLNUM: null, //出库数量
        DOLMONEY: null //出库金额
      },
      DPOID: null,
      isINFO: true,
      xblx: [],
      ghhnums: 0,
      szypnums: 0,
      CHDID: null,
    };
  },
  methods: {
      //根据正式业务编号获取ID
      getRegInfo() {
        this.regInfo.CHDDESC = null;
        if(this.regInfo.CHDREGBUSNUM!=null){
        let data = {
          REGBUSNUM: this.regInfo.CHDREGBUSNUM,
          CHDSOURCE:'丧葬用品'
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Registration.GetRegistrationByNoAnAndSource,
          res => {
            let reg = res.data.content;
            if(!reg)
            {
              this.$message({
              type: "error",
              message: "未找到逝者信息!"
              });
              Object.assign(
                this.$data.regInfo,
                this.$options.data().regInfo
                );
              return;
            }
            this.chlList = res.data.content.list_Dol || [];
            this.nums(this.chlList);
            this.regInfo.CHDREGID = reg.REGID;
            this.regInfo.CHDID = reg.CHDID;
            this.regInfo.REGID = reg.REGID;
            this.regInfo.DPOID = reg.DPOID || null;
            this.regInfo.REGNAME = reg.REGNAME; //逝者姓名
            this.regInfo.REGHANDLERNAME = reg.REGHANDLERNAME; //客户姓名
            this.regInfo.REGADDRESS = reg.REGADDRESS; //接尸地址
            this.regInfo.REGDETAILADDRESS = reg.REGDETAILADDRESS; //户籍地址
            this.regInfo.REGCARDNO = reg.REGCARDNO; //证件号码
            this.regInfo.REGISKEYPOINT = reg.REGISKEYPOINT; //减免类型
            this.regInfo.CHDDESC = reg.CHDDESC //备注
            this.regInfo.REGDATE = reg.REGDATE;       
            this.regInfo.REGCREMATIONDATE =  reg.REGCREMATIONDATE; 
          }
        );
        }
      },
    getCode() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Registration.QueryAllCode,
        res => {
          let codeList = res.data.content;
          for (var i in codeList) {
            switch (codeList[i].CTPID) {
              case "性别类型":
                this.xblx = codeList[i].Cods;
                break;
              default:
            }
          }
        }
      );
    },
    // 按enter键，跳下一行
    enterEvent(rowNum) {
      //获取所有行
      let rows = this.$refs.inputs.getElementsByClassName("allRow");
      //获取当前行
      if (rowNum == this.chlList.length - 1) return;
      let currow = rows[rowNum + 1];
      // 获取当前行所有列
      let inputs = currow.getElementsByTagName("input");
      inputs[2].select();
      let tableHeight = this.$refs.trscroll[0].scrollHeight * (rowNum + 1);
      $("#box").animate({ scrollTop: tableHeight }, 500);
    },
    //删除行
    remove(index) {
      this.chlList.splice(index, 1);
      this.nums(this.chlList);
    },
    //出库时候的提交
    submissions() {
      this.$confirm("确认是否提交该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          let chlList = JSON.parse(JSON.stringify(this.chlList));
          chlList.forEach(item => {
            item.DOLDPGID = item.DPGID;
            item.DOLMONEY = item.DOLMONEY;
            item.DPOREMARKS = item.DPOREMARKS;
          });
          if (chlList.length != 0) {
            apiBase.DoService(
              {
                DPOREGID: this.reginfoid,
                REGID: this.regInfo.REGID || null,
                DPOID: this.regInfo.DPOID || null,
                CHDID: this.regInfo.CHDID || null,
                REGHANDLERNAME: this.regInfo.REGHANDLERNAME, 
                CHDREGBUSNUM: this.regInfo.CHDREGBUSNUM,//业务编号
                REGBUSNUM: this.regInfo.REGBUSNUM,//关联编号
                REGNAME: this.regInfo.REGNAME,
                DPOREMARKS: this.regInfo.CHDDESC,
                list_Dol: chlList,
              },
              apiBase.getApiAdress().Depot.CreateRetailFuneralDpo,
              res => {
                this.$message({
                  type: "success",
                  message: "丧葬用品出库成功!"
                });
                this.issubmit = true;
                this.DPOID = res.data.content.DPOID;
                this.closeDialog();
                this.refreshData();
              }
            );
          } else {
            this.$message({
              type: "error",
              message: "未添加商品!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      // this.refreshData();
    },

    datareapet() {
      Object.assign(this.$data.regInfo, this.$options.data().regInfo);
      this.crhData.REGNO = null;
      this.crhData.BOOKNO = null;
      this.reginfoid = null;
      this.regInfo.DPOREMARKS = null;
    },
    print() {
      this.titles = "打印逝者信息";
      let data = {
        REGID: this.reginfoid
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Pdf.PrintRegDetail,
        res => {
          this.printUrl = res.data.content.PDFNAME;
          this.$refs.Print.open();
        }
      );
    },
    //打开弹出框
    open(order, id, dopid) {
      this.order = order;
      this.DPOID = dopid;
      this.ghhnums = 0;
      this.szypnums = 0;
      this.issubmit = false;
      switch (this.order) {
        case ADD:
          this.title = "丧葬用品出库申请";
          this.chlList = [];
          this.isINFO = false;
          this.datareapet();
          this.$refs.dialog.open();
          break;
        case INFO:
          this.title = "丧葬用品出库详情";
          this.chlList = [];
          this.crhData.REGNO = id;
          this.isINFO = true;
          setTimeout(() => {
            this.getinfo();
          }, 100);
          this.$refs.dialog.open();
          break;
        case CHANGE:
          this.title = "丧葬用品出库修改";
          this.chlList = [];
          this.crhData.REGNO = id;
          this.isINFO = false;
          setTimeout(() => {
            this.getinfo();
          }, 100);
          this.$refs.dialog.open();
          break;
        default:
      }
    },
    datareapets() {
      Object.assign(this.$data.regInfo, this.$options.data().regInfo);
      this.crhData.BOOKNO = null;
      this.reginfoid = null;
      this.regInfo.DPOREMARKS = null;
      this.chlList = [];
    },

    getinfo() {
      let data = {
        DPOID: this.DPOID
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Depot.DetailRetailFuneralDpo,
        res => {
          this.$refs.infocus1.focus();
          let reg = res.data.content;
          if (!reg) {
            this.$message({
              type: "error",
              message: "未找到逝者信息!"
            });
            Object.assign(this.$data.regList, this.$options.data().regList);
            return;
          }
          this.chlList = res.data.content.List_DOL;
          this.nums(this.chlList);
          this.regInfo = res.data.content;
          this.reginfoid = res.data.content.REGID;
          this.regInfo.DPOUSENAM = res.data.content.REGHANDLERNAME;
          this.regInfo.REGBUSNUM = res.data.content.REGBUSNUM;
          this.regInfo.REGNAME = res.data.content.REGNAME;
          this.CHDID = res.data.content.CHDID;
        }
      );
    },
    // 根据商品编号获取商品信息
    getbookdetail() {
      let data = {
        DPGBAINUM: this.crhData.BOOKNO
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Depot.FuneralDPGDetail,
        res => {
          let reg = res.data.content;
          reg.DOLNUM = 1;
          reg.DOLMONEY = reg.DPGSALE;
          if (!reg) {
            this.$message({
              type: "error",
              message: "未找到商品信息!"
            });
            Object.assign(this.$data.regList, this.$options.data().regList);
            return;
          } else {
            if (reg.SOKUSABLENUM < 1) {
              this.$message({
                type: "error",
                message: "商品库存不足"
              });
            }
          }
          this.crhData.BOOKNO = null;
          this.chlList.push(reg);
          this.nums(this.chlList);
          let tableHeight = this.$refs.scroll.scrollHeight;
          $("#box").animate({ scrollTop: tableHeight }, 500);
        }
      );
    },
    nums(val) {
      let ghhnum = 0;
      let szypnum = 0;
      if (val.length > 0) {
        val.forEach(item => {
          // item.DPGID = item.DOLDPGID;
          if (item.CYPNAME == "骨灰盒") {
            ghhnum = ghhnum + Number(item.DOLMONEY);
          }
          if (item.CYPNAME == "丧葬用品") {
            szypnum = szypnum + Number(item.DOLMONEY);
          }
        });
      }
      this.ghhnums = ghhnum;
      this.szypnums = szypnum;
    },
    check(index) {
      let chls = this.chlList[index];
      if (chls.DOLNUM > chls.SOKUSABLENUM) {
        this.$message({
          type: "error",
          message: "商品库存不足"
        });
      }
      chls.DOLMONEY = accMul(Number(chls.DOLNUM), Number(chls.DPGSALE));
      this.nums(this.chlList);
    },
    //只能输入正整数
    checkNumber(value) {
      value = value.replace(/\D/g, "").replace(/^0+(?=\d)/, "");
      if (value !== "") {
        if (value.substr(0, 1) === "0" && value.length === 2) {
          value = value.substr(1, value.length);
        }
      } else {
        value = 0;
      }
      return value;
    },
    //只能输入金额
    checkMoney(value) {
      //修复第一个字符是小数点 的情况.
      if (value !== "" && value.substr(0, 1) === ".") {
        value = "";
      }
      value = value.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
      value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      value = value
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (value.indexOf(".") < 0 && value !== "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (value.substr(0, 1) === "0" && value.length === 2) {
          value = value.substr(1, value.length);
        }
      } else if (value === "") {
        value = 0;
      }
      return value;
    },
    closeDialog() {
      switch (this.order) {
        case ADD:
        case INFO:
        case CHANGE:
          this.$refs.dialog.close();
          break;
        default:
          break;
      }
    },
    refreshData() {
      this.$emit("refreshData");
    }
  },
  created() {
    this.getCode();
  },
  //计算属性
  computed: {
    mountTotal() {
      let total = 0;
      for (let chl of this.chlList) {
        total = accAdd(total, chl.DOLMONEY);
      }
      return total;
    }
  },

  watch: {},
  mounted() {},
  components: {
    sweetModal
  }
};
</script>
